<template>
  <div>

    <a-form ref="userForm" class="form"  :form="userForm">

      <a-row>
        <a-col :span="24">
          <a-form-item label="账号" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入账号"
              maxlength="50"
              v-model="userFormData.account"
              autocomplete="off"
              v-decorator="['userFormData.account',
                                {rules: [{ required: true, message: '请输入账号', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="姓名" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入姓名"
              maxlength="50"
              autocomplete="off"
              v-model="userFormData.name"
              v-decorator="['userFormData.name',
                                {rules: [{ required: true, message: '请输入姓名', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="性别" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-radio-group name="radioGroup" v-model="userFormData.sex" defaultValue="男">
              <a-radio value="男">男</a-radio>
              <a-radio value="女">女</a-radio>

            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="密码" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入密码"
              maxlength="50"
              autocomplete="off"
              v-model="userFormData.password"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="联系方式" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入联系方式"
              maxlength="50"
              autocomplete="off"
              v-model="userFormData.phone"
              v-decorator="['userFormData.phone',
                                {rules: [{ required: true, message: '请输入联系方式', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="部门" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入部门"
              maxlength="50"
              autocomplete="off"
              v-model="userFormData.department"
              v-decorator="['userFormData.department',
                                {rules: [{ required: true, message: '请输入部门', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="角色" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-input
              placeholder="请输入角色"
              maxlength="50"
              autocomplete="off"
              v-model="userFormData.role"
              v-decorator="['userFormData.role',
                                {rules: [{ required: true, message: '请输入角色', whitespace: true}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="状态" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-radio-group name="radioGroup" v-model="userFormData.state" defaultValue="在职">
              <a-radio value="在职">在职</a-radio>
              <a-radio value="离职">离职</a-radio>
              <a-radio value="锁定">锁定</a-radio>

            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
            <a-textarea
              placeholder="请输入备注"
              maxlength="350"
              v-model="userFormData.desc"
              autocomplete="off"
              :autosize="{ minRows: 4, maxRows: 7 }"/>
          </a-form-item>
        </a-col>


      </a-row>

    </a-form>

  </div>
</template>

<script>

  import FooterToolBar from '@/components/tools/FooterToolBar'
  import cities from '@/db/cities'
  import indexedDB from '../../db/db'
  import {getBase64} from '../../utils/util'
  import moment from "moment"
  export default {
    name: "userFormTemplate",
    components: {
      FooterToolBar,
    },
    props:{
      userFormDataJson:Object
    },
    data() {
      return {
        options:cities,
        loading: false,
        userForm:this.$form.createForm(this),
        fileImgList:"",
        userFormData:{
          account: '',
          name:'',
          department:"",
          role:"",
          phone:"",
          state:"在职",
          desc:"",
          password:"88888888",
          sex:"男",

        },
        licenseTypeList:[],
        landTypeList:[],

      }
    },
    mounted(){
      this.userFormData = this.userFormDataJson;

    },
    methods: {

      saveFormData(){
        let _this = this
        this.userForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.insert({name:"userList"},_this.userFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("提交成功");
                _this.userFormData = {
                  account: '',
                  name:'',
                  department:"",
                  role:"",
                  phone:"",
                  state:"在职",
                  desc:"",
                  password:"88888888",
                  sex:"男",
                };
                _this.userForm.resetFields();
                this.$emit('fatherEditMethod');
              }else{
                this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })

      },

      handleEdit(record){
        this.userFormData = Object.assign({}, record)
        setTimeout(()=>{
          this.userForm.setFieldsValue({
            "userFormData.account":this.userFormData.account,
            "userFormData.name":this.userFormData.name,
            "userFormData.phone":this.userFormData.phone,
            "userFormData.department":this.userFormData.department,
            "userFormData.role":this.userFormData.role,

          })

        }, 200);

      },
      editeSaveFormData(){
        let _this = this
        console.log(_this.userFormData)
        _this.userFormData.state = "待审核";
        this.userForm.validateFields((err, values) => {
          // console.log(values);
          // console.log(err);
          if (!err) {
            indexedDB.update({name:"userList"},_this.userFormData).then((res)=>{
              console.log(res);
              if(res==true){
                _this.$message.info("保存成功");
                _this.userFormData = {
                  account: '',
                  name:'',
                  department:"",
                  role:"",
                  phone:"",
                  state:"在职",
                  desc:"",
                  password:"88888888",
                  sex:"男",
                };
                _this.userForm.resetFields();
                this.$emit('fatherEditMethod');
              }else{
                _this.$message.error("保存失败！");
              }
            });
          }else{
            _this.$message.error("请输入必填值");
          }
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 24px;
  }
</style>